<script setup>
import { ref } from "vue";
const topList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/enter/head-icon1.png",
		title: "医护上门",
		desc: "造口/母婴等",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/enter/head-icon2.png",
		title: "营养咨询",
		desc: "专业营养咨询",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/enter/head-icon3.png",
		title: "叮咚商城",
		desc: "医疗耗材用品",
	},
]);
const descList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/icon/main-icon1.png",
		title: "营养讲堂",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/icon/main-icon2.png",
		title: "创面课程",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/icon/main-icon3.png",
		title: "基金会",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/static/icon/main-icon4.png",
		title: "慈善救助",
	},
	{
		id: 5,
		img: "https://oss.dingdongdr.com/static/icon/main-icon5.png",
		title: "名医直播",
	},
]);
// 科室
const ctionList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/user/伤造口专科.png",
		title: "伤造口专科",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/user/静疗专科.png",
		title: "静疗专科",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/user/母婴专科.png",
		title: "母婴专科",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/static/user/常用临床护理.png",
		title: "常用临床护理",
	},
	{
		id: 5,
		img: "https://oss.dingdongdr.com/static/user/腹透专科.png",
		title: "腹透专科",
	},
]);
/* 专业医护 */
const professionalNursing = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/static/enter/doctor1.png",
		name: "孙红玲",
		rank: "副主任护士",
		score: "5.0",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/static/enter/doctor2.png",
		name: "孙艳",
		rank: "主管护士",
		score: "5.0",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/static/enter/doctor3.png",
		name: "夏金萍",
		rank: "主管护士",
		score: "5.0",
	},
]);
const productList = ref([
	{
		id: 1,
		img: "https://www.dingdongdr.com/mall/pictures/7d46e81f-c741-4fe5-bbe0-e9d0f3c6ebbc@%E7%88%B1%E5%8F%AF%E6%AC%A3-%E7%BA%B3%E7%B1%B3%E9%93%B6%E5%8C%BB%E7%94%A8%E6%8A%97%E8%8F%8C%E6%95%B7%E6%96%9910CMx15CM.jpg",
		title: "爱可欣-纳米银医用抗菌敷料-10cm×15cm",
		price: "46.00",
	},
	{
		id: 2,
		img: "https://www.dingdongdr.com/mall/pictures/9b243efd-d32b-486f-af99-bda8a321f496@%E7%88%B1%E5%8F%AF%E6%AC%A3-%E5%8C%BB%E7%94%A8%E5%87%9D%E8%83%B6%E5%88%9B%E9%9D%A2%E6%95%B7%E6%96%9910g.jpg",
		title: "爱可欣-医用凝胶创面敷料10g装",
		price: "71.00",
	},
]);
/* 项目 */
const projectList = ref([
	{
		id: 1,
		img: "https://oss.dingdongdr.com/dingdong/images/5e107ccd-5a84-41bb-961c-4f319b8cdbc7.png",
	},
	{
		id: 2,
		img: "https://oss.dingdongdr.com/dingdong/images/0a89cfe2-a917-4b64-ad7b-3a73ccbf5c2e.png",
	},
	{
		id: 3,
		img: "https://oss.dingdongdr.com/dingdong/images/a5ccee64-3e04-4907-9656-bf3395690990.png",
	},
	{
		id: 4,
		img: "https://oss.dingdongdr.com/dingdong/images/bc894199-bf6a-47a7-a238-24b70c0df832.png",
	},
	{
		id: 5,
		img: "https://oss.dingdongdr.com/dingdong/images/78bdc925-a552-46bf-a05c-279a90c60441.png",
	},
	{
		id: 6,
		img: "https://oss.dingdongdr.com/dingdong/images/6f1f58f1-c2ed-4c2e-af90-971251907ba5.png",
	},
	{
		id: 7,
		img: "https://oss.dingdongdr.com/dingdong/images/d09f8c95-c297-416b-ab0b-c56d18def0a1.png",
	},
	{
		id: 8,
		img: "https://oss.dingdongdr.com/dingdong/images/083da84f-6d5f-46db-aed8-cfcc582942d0.png",
	},
]);
</script>
<template>
	<div class="flex h-[166px] bg-[url('https://oss.dingdongdr.com/static/enter/tab-bg.png')] bg-contain bg-no-repeat">
		<div class="m-auto mb-0 flex h-[125px] w-[350px] rounded-[10px] bg-white">
			<div class="m-auto flex flex-col items-center" v-for="item in topList" :key="item.id">
				<img class="mb-[10px] h-[40px] w-[40px]" :src="item.img" alt="" />
				<p class="truncate text-[16px] font-[800] text-[#212532]">{{ item.title }}</p>
				<p class="truncate text-[12px] text-[#848484]">{{ item.desc }}</p>
			</div>
		</div>
	</div>
	<div class="mx-auto my-[20px] grid w-[350px] grid-cols-5 place-items-center rounded-[10px]">
		<div class="m-auto flex flex-col items-center" v-for="item in descList" :key="item.id">
			<img class="mb-[6px] h-[32px] w-[32px]" :src="item.img" alt="" />
			<p class="... w-[60px] truncate text-[14px] text-[#333333]">{{ item.title }}</p>
		</div>
	</div>
	<div class="mx-auto my-[20px] grid w-[350px] grid-cols-5 place-items-center rounded-[10px]">
		<div class="flex flex-col items-center" v-for="item in ctionList" :key="item.id">
			<img class="mb-[6px] h-[32px] w-[32px]" :src="item.img" alt="" />
			<p class="... w-[60px] truncate text-[14px] text-[#333333]">{{ item.title }}</p>
		</div>
	</div>

	<div
		class="mx-auto my-[10px] h-[90px] w-[350px] rounded-[10px] bg-[url('https://oss.dingdongdr.com/static/enter/main-img.png')] bg-contain bg-no-repeat"
	></div>
	<van-notice-bar
		left-icon="volume-o"
		color="#212532"
		background="#ffffff"
		:scrollable="false"
		class="mx-auto w-[350px] rounded-[10px]"
	>
		<van-swipe vertical class="h-[40px] leading-[40px]" :autoplay="3000" :touchable="false" :show-indicators="false">
			<van-swipe-item>可预约居家护理</van-swipe-item>
			<van-swipe-item>可预约居家护理</van-swipe-item>
		</van-swipe>
	</van-notice-bar>
	<div class="mx-auto my-[10px] grid w-[350px] grid-cols-2 place-items-center gap-x-[6px]">
		<div
			class="h-[190px] w-[172px] rounded-[10px] bg-white bg-[url('https://oss.dingdongdr.com/static/enter/%E8%90%A5%E5%85%BB%E8%87%AA%E6%B5%8B.png')] bg-contain bg-no-repeat"
		></div>
		<div class="grid h-[190px] w-[172px] grid-flow-row gap-y-[6px]">
			<div
				class="w-full rounded-[10px] bg-white bg-[url('https://oss.dingdongdr.com/static/enter/%E5%8F%AE%E5%92%9A%E7%A7%9F%E6%9C%BA.png')] bg-contain bg-no-repeat"
			></div>
			<div
				class="w-full rounded-[10px] bg-white bg-[url('https://oss.dingdongdr.com/static/enter/%E6%96%B0%E4%BA%BA%E7%A4%BC%E5%8C%85.png')] bg-contain bg-no-repeat"
			></div>
		</div>
	</div>

	<div class="mx-auto w-[350px] rounded-[10px] bg-white p-[10px]">
		<!-- 专业医护 标题 -->
		<div class="flex items-center justify-between">
			<div class="flex items-center justify-between">
				<p class="mr-[10px] text-[17px] font-[600]">专业医护</p>
				<span class="text-[#9e9e9e]">贴心护，放心选</span>
			</div>
			<div class="text-[#9e9e9e]">更多<van-icon name="arrow" /></div>
		</div>
		<div class="mt-[10px] grid w-full grid-cols-3 place-items-center gap-x-[10px]">
			<div v-for="item in professionalNursing" :key="item.id">
				<img class="h-[102px] w-[102px] rounded-[10px]" :src="item.img" alt="" />
				<p class="mt-[6px] flex justify-between">
					{{ item.name }}<span class="text-[11px]"><van-icon name="star" color="#ffbd22" />&nbsp;{{ item.score }}</span>
				</p>
				<p class="text-[13px] text-[#8b8b8b]">{{ item.rank }}</p>
			</div>
		</div>
	</div>
	<!-- 精选商品 -->
	<div class="mx-auto my-[10px] flex w-[350px] items-center justify-between">
		<div class="text-[17px] font-[600]">精选商品</div>
		<div class="text-[#9e9e9e]">更多<van-icon name="arrow" /></div>
	</div>
	<div class="mx-auto grid w-[350px] grid-cols-2 place-items-center gap-x-[10px]">
		<div class="w-full rounded-[10px] bg-white p-[10px] pb-0" v-for="item in productList" :key="item.id">
			<img class="h-[150px] w-[150px]" :src="item.img" alt="" />
			<p class="mt-[10px]">{{ item.title }}</p>
			<p class="flex items-center justify-between text-[18px]">
				<span class="my-[4px] text-[#fc5f00]">&yen;{{ item.price }}</span> <van-icon name="add" color="#0e7eff" />
			</p>
		</div>
	</div>
	<!-- 医护上门 -->
	<div class="mx-auto my-[10px] flex w-[350px] items-center justify-between">
		<div class="text-[17px] font-[600]">医护上门</div>
		<div class="text-[#9e9e9e]">更多<van-icon name="arrow" /></div>
	</div>

	<div class="mx-auto grid w-[350px] grid-cols-4 place-items-center gap-[10px] rounded-[10px] bg-white p-[10px]">
		<img class="h-[76px] w-[76px]" v-for="item in projectList" :key="item.id" :src="item.img" alt="" />
	</div>
	<div class="pb-[10px]"></div>
</template>
